<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
import { PropType, ref, Ref, onMounted } from "vue";
import { useECharts } from "@/hooks/web/useECharts";

defineProps({
  width: {
    type: String as PropType<string>,
    default: "100%",
  },
  height: {
    type: String as PropType<string>,
    default: "calc(100vh - 78px)",
  },
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
const yAxisData = [
  "原因1",
  "原因2",
  "原因3",
  "原因4",
  "原因5",
  "原因6",
  "原因7",
  "原因8",
  "原因9",
  "原因10",
];
onMounted(() => {
  setOptions({
    backgroundColor: "#0f375f",
    title: [
      {
        text: "各渠道投诉占比",
        left: "2%",
        top: "1%",
        textStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
      {
        text: "投诉原因TOP10",
        left: "40%",
        top: "1%",
        textStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
      {
        text: "各级别投诉占比",
        left: "2%",
        top: "50%",
        textStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
    ],
    grid: [{ left: "50%", top: "7%", width: "45%", height: "90%" }],
    tooltip: {
      formatter: "{b} ({c})",
    },
    xAxis: [
      {
        gridIndex: 0,
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        axisLine: { show: false },
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        interval: 0,
        data: yAxisData.reverse(),
        axisTick: { show: false },
        axisLabel: { show: true },
        splitLine: { show: false },
        axisLine: { show: true, lineStyle: { color: "#6173a3" } },
      },
    ],
    series: [
      {
        name: "各渠道投诉占比",
        type: "pie",
        radius: "30%",
        center: ["22%", "25%"],
        data: [
          { value: 335, name: "客服电话" },
          { value: 310, name: "奥迪官网" },
          { value: 234, name: "媒体曝光" },
          { value: 135, name: "质检总局" },
          { value: 105, name: "其他" },
        ],
        labelLine: { show: false },
        label: {
          show: true,
          formatter: "{b} \n ({d}%)",
          color: "#B1B9D3",
        },
      },
      {
        name: "各级别投诉占比",
        type: "pie",
        radius: "30%",
        center: ["22%", "75%"],
        labelLine: { show: false },
        data: [
          { value: 335, name: "A级" },
          { value: 310, name: "B级" },
          { value: 234, name: "C级" },
          { value: 135, name: "D级" },
        ],
        label: {
          show: true,
          formatter: "{b} \n ({d}%)",
          color: "#B1B9D3",
        },
      },
      {
        name: "投诉原因TOP10",
        type: "bar",
        xAxisIndex: 0,
        yAxisIndex: 0,
        barWidth: "45%",
        itemStyle: { color: "#86c9f4" },
        label: { show: true, position: "right", color: "#9EA7C4" },
        data: dataAll.sort(),
      },
    ],
  });
});
</script>
